<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文章列表</title>
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="./libs/jquery-1.12.4.min.js"></script>
  <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
  <!-- 引入模板引擎js文件 -->
  <script src="./libs/template-web.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="common_title">
      文章类别管理
    </div>
    <div class="container-fluid common_con">
      <table class="table table-striped table-bordered table-hover mp20 category_table">
        <thead>
          <tr>
            <th>名称</th>
            <th>Slug</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>奇趣事</td>
            <td>funny</td>
            <td class="text-center">
              <a href="javascript:void(0)" data-toggle="modal" class=" btn btn-info btn-xs">编辑</a>
              <a href="javascript:void(0)" class="btn btn-danger btn-xs">删除</a>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3" class="text-center">
              <a href="javascript:void(0)" class="btn btn-success" id="xinzengfenlei" data-toggle="modal"
                data-target="#myModal">新增分类</a>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
  <!-- 准备模态框静态结构 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">New message</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">分类名称:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">分类别名:</label>
              <input type="text" class="form-control" id="message-text"></input>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary btn-change">Send message</button>
        </div>
      </div>
    </div>
  </div>

  <!-- // 通过data属性控制模态框的显示 -->
  <!-- <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal" class="btn btn-info btn-xs" data-id="{{v.id}}">编辑</a> -->
  <script src="./libs/https.js"></script>

  <!-- 准备文章类别模板结构 -->
  <script type="text/html" id="tpl-category">
    // $value: 数组的值
    // 给$value取一个别名,$value == v
    {{each data v}}
    <tr>
      <td>{{v.name}}</td>
      <td>{{v.slug}}</td>
      <td class="text-center">
        <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal" class="btn btn-info btn-xs"
          data-id="{{v.id}}">编辑</a>
        <a href="javascript:void(0)" class="btn btn-danger btn-xs btn-del" data-id="{{v.id}}">删除</a>
      </td>
    </tr>
    {{/each}}
  </script>
  <script>
    $(function () {
      // 
      // 5. 区分触发模态框显示的按钮来源
      // 新增 / 编辑: 设置不同的显示文本
      $('#myModal').on('show.bs.modal', function (e) {
        // 6. 利用事件对象中relatedTarget属性可以获得触发的元素
        let elm = e.relatedTarget;
        // 根据按钮的dataid值,获得数据
        let dataid = $(elm).attr('data-id');

        // 7. 判断触发元素是谁
        if (elm.innerText == '新增分类') {
          // 通过新增按钮触发
          $('.modal-title').text('新增分类');
          $('.btn-change').text('新增');
        } else {
          // 通过编辑按钮触发
          $('.modal-title').text('编辑分类');
          $('.btn-change').text('编辑');
          // 8. 获得当前编辑按钮的指定类别数据,渲染结构

          // 9. 发起ajax请求,获得数据
          $.ajax({
            type: 'get',
            url: BigNew.category_search,
            data: {
              id: dataid
            },
            success: function (backData) {
              if (backData.code == 200) {
                // 10. 将返回的数据,设置到模态框中
                $('#recipient-name').val(backData.data[0].name);
                $('#message-text').val(backData.data[0].slug);
              }
            }
          })
        }
        // 单独设置模态框的隐藏事件
        $('#myModal').on('hidden.bs.modal', function () {
          // 当模态框被隐藏,则清空所有的输入内容
          $('#recipient-name').val('');
          $('#message-text').val('');
        })

        // 11. 给模态框的新增/编辑按钮设置点击事件
        $('.btn-change').on('click', function () {
          // 12. 区别:新增,编辑
          if ($(this).text() == '新增') {
            // 新增功能
            // 13. 获得输入的内容
            let name = $('#recipient-name').val().trim();
            let slug = $('#message-text').val().trim();
            if (name == '' || slug == '') {
              return;
            }
            // 14. 发起ajax请求,新增分类数据
            $.ajax({
              type: 'post',
              url: BigNew.category_add,
              data: {
                name: name,
                slug: slug
              },
              success: function (backData) {
                if (backData.code == 201) {
                  // 15. 新增成功之后,关闭模态框,重新加载数据
                  $('#myModal').modal('hide');
                  loadData();
                }
              }
            })

          } else {
            // 编辑功能
            // 15. 获得输入的内容
            let name = $('#recipient-name').val().trim();
            let slug = $('#message-text').val().trim();
            if (name == '' || slug == '') {
              return;
            }
            // 16. 发起ajax请求,修改指定的类别数据
            $.ajax({
              type: 'post',
              url: BigNew.category_edit,
              data: {
                id: dataid,
                name: name,
                slug: slug
              },
              success: function (backData) {
                if (backData.code == 200) {
                  // 17. 修改成功后,隐藏模态框,重新加载数据
                  $('#myModal').modal('hide');
                  loadData();
                }
              }
            })
          }


        })
        // 18. 给删除按钮设置点击事件
        $('tbody').on('click', '.btn-del', function () {
          // 19. 获得当前按钮的dataid值
          let dataid = $(this).attr('data-id');
          // 20. 发起ajax请求删除指定数据
          $.ajax({
            type: 'post',
            url: BigNew.category_delete,
            data: {
              id: dataid
            },
            success: function (backData) {
              if (backData.code == 204) {
                alert(backData.msg);
                loadData();
              }
            }
          })
        })
      })
    })
    // 1. 封装函数: 获得文章类别的数据,渲染页面结构
    function loadData() {
      // 2. 发起ajax请求,获得文章类别数据
      $.ajax({
        type: 'get',
        url: BigNew.category_list,
        success: function (backData) {
          if (backData.code == 200) {
            // 3. 利用模板引擎,结合数据,生成标签
            let htmlStr = template('tpl-category', backData);
            // 4. 渲染到指定的结构中
            $('tbody').html(htmlStr);
          }
        }
      })
    }
    // 首次加载页面
    loadData();
  </script>

</html>